<template>
  <el-dialog v-model="dialogVisible" :fullscreen=true :draggable=true  :title="nodeData['name']" @close='dialogFuncClose'>
    <div class="common-layout">
      <el-container>
        <el-header class="radius-small" height="100">
          <el-form >
            <el-row>
              <el-col :span="18">
                <el-form-item label="编排服务名">
                  <el-input v-model="nodeData['name']" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="超时时长">
                    <el-input v-model="nodeData['overtime']" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label="版本号">
                  <el-input v-model="nodeData['version']" />
                </el-form-item>
              </el-col>
            </el-row> 
          </el-form>
        </el-header>
        <el-container>
          <el-aside width="200px" class="radius-small">
            <el-menu default-active="unitinput">
              <el-menu-item index="unitinput" @click="fnunitinputshow">
                <template #title>
                  <span>原子服务输入</span>
                </template>
              </el-menu-item>
              <el-menu-item index="unitoutput" @click="fnunitoutputshow">
                <template #title>
                  <span>原子服务输出</span>
                </template>
              </el-menu-item>
            </el-menu>
          </el-aside>
          <el-main>
            <inputparam :inputparamMap="inputparam" v-show="unitinputshow"></inputparam>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </el-dialog>
</template>

<script lang="ts">

import inputparam from './inputparam.vue'

export default {
    name: 'funcNodeEdit',
    emits: ['dialogFuncClose'],
    props:{
      dialogVisible:{
          type: Boolean,
          default: false
      },
      nodeDataMap: {
        type:Map,
        default: { }
      }
    },
    components:{
      inputparam,
    },
    data () {
      return {
          svrName:'',
          overtime:'',
          project: '',
          serviceabsname:'',
          unitinputshow:true,
          unitoutputshow:false,
          inputparamMap: new Map<String, Object>(),
      }
    },
    methods: {
      dialogFuncClose() {
        console.log(this.nodeDataMap.get("nodeData")["name"])
        this.$emit('dialogFuncClose')
      },
      fnunitinputshow() {
        this.unitinputshow = true
        this.unitoutputshow = false
      },
      fnunitoutputshow() {
        this.unitinputshow = false
        this.unitoutputshow = true
      },
    },
    computed:{
      nodeData() {
        return this.nodeDataMap.get("nodeData")? this.nodeDataMap.get("nodeData"):{}
      },

      inputparam() {
        const nodedata = this.nodeDataMap.get("nodeData")? this.nodeDataMap.get("nodeData"):{}

        if (nodedata == {}) {
          return 
        }
        this.inputparamMap.set("inputparam",nodedata["input-parameter"])
        return this.inputparamMap
      },
    },
    mounted () {
        // console.log(this.$route.params.nodeName)
        // this.svrName = this.$route.params.nodeName
    }
}
</script>

<style scoped>
.radius-small {
  border: 1px solid var(--el-border-color);
  border-radius: --el-border-radius-small;
  margin-top: 20px;
}
</style>